<template>
	<scroll-view class="content" :enable-back-to-top="true" @refresherrefresh="onDownRefresh"
		refresher-default-style :refresher-triggered="isRefreshing" refresher-enabled="{{true}}"
		@scrolltolower="loadMore" :onLoadmore="false" scroll-y="true">
		<view class="access-list-content">
			<view class="access-l-nav">
				<span></span>
				<view>租客授权</view>
			</view>
			<view class="access-l-info">
				<view class="access-l-top">
					<view>
						<view>租客姓名：</view>
						<view>{{ formData.memberName}}</view>
					</view>
					<view>
						<view>联系电话：</view>
						<view>{{formData.phone}}</view>
					</view>
					<view>
						<view>证件号码：</view>
						<view>{{formData.idNumber}}</view>
					</view>
					<view>
						<view>房源地址：</view>
						<view>{{addres}}</view>
					</view>
				</view>
				<view class="access-l-btm">
					<view>
						<image @click="goPage('tenant-auth','edit')" v-if="photoUrl" :src="photoUrl" mode="">
						</image>
						<image @click="goPage('tenant-auth')" v-else
							:src="$imgUrl + '/services/control-submit.png'" mode="">
						</image>

					</view>
				</view>
			</view>
			<view class="access-l-nav">
				<span></span>
				<view>同住人授权</view>
				<view class="access-l-t-c" @click="goPage('cohabit-auth')">新增授权</view>
			</view>
			<view class="access-l-info margin-l" @click="goPage('cohabit-auth','cardedit',item)"
				v-for="(item,index) in dataList" :key="index">
				<view class="access-l-top">
					<view>
						<view>租客姓名：</view>
						<view>{{item.memberName}}</view>
					</view>
					<view>
						<view>联系电话：</view>
						<view>{{item.phone}}</view>
					</view>
					<view>
						<view>证件号码：</view>
						<view>{{item.idNumber}}</view>
					</view>
				</view>
				<view class="access-l-btm">
					<view>
						<image :src="item.photoUrl" mode=""></image>
						<view class="access-l-set">
							<image :src="$imgUrl + '/services/delete-icon.png'"
								@click.native.stop="deleteO(item.id,index)" mode="">
							</image>
						</view>
					</view>
				</view>
				<image :src="ImgSelect(item.status)" v-if="item.status != '2'" class="access-status" mode=""></image>
			</view>
		</view>
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" :showCancelButton="true"
			title="确认删除同住人?"></u-modal>
	</scroll-view>
</template>
<script setup lang="ts">
	import * as API from '@/common/API/prohibit'
	import { reactive, ref } from "vue";
	import { onShow } from "@dcloudio/uni-app"
	import { useStore } from 'vuex' // 引入useStore 方法
	import config from '@/utils/config'
	const store = useStore()  // 该方法用于返回store 实例
	const formData = reactive({
		memberName: uni.getStorageSync('userInfo').name || uni.getStorageSync('userInfo').nickname, //人员姓名
		idNumber: uni.getStorageSync('userInfo').cardNo, //身份证号
		phone: uni.getStorageSync('userInfo').mobile, //手机号
	})
	const form = reactive({
		pageSize: 10,
		pageNo: 1,
		page: 0
	})
	const isLoadMore = ref(false)
	const isRefreshing = ref(false)
	const dataList = ref([])
	// 跳转
	const goPage = (url, type, item) => {
		if (type === 'edit') {
			store.commit('DOOR_PASS_Img', photoUrl.value);
		} else {
			store.commit('DOOR_PASS_Img', false);
		}

		if (type === 'cardedit') {
			store.commit('DOOR_PASS_CARD', item);
		} else {
			store.commit('DOOR_PASS_CARD', false);
		}

		uni.navigateTo({
			url: url
		})
	}
	const ImgSelect = (status) => {
		if (status == '1') {
			return config.imgUrl+'/services/check-icon.png'
		} else if (status == '4') {
			return config.imgUrl+'/services/refuse-icon.png'
		}
	}
	const rowID = ref()
	const rowIndex = ref()
	const deleteO = (id, index) => {
		rowIndex.value = ''
		rowID.value = id
		show.value = true
		rowIndex.value = index
	}
	const show = ref(false)
	const confirm = async () => {
		show.value = false
		let res = await API.removeface(rowID.value)
		if(res){
			uni.showToast({
				title: '删除成功',
			});
			dataList.value.splice(rowIndex.value, 1);
		}
	}
	// 取消
	const cancel = () => {
		show.value = false
	}
	// 下拉刷新
	const onDownRefresh = () => {
		console.log('下拉刷新')
		form.pageNo = 1
		form.pageSize = 10
		isRefreshing.value = true;
		dataList.value = []
		getList()
		getFace()
		setTimeout(() => {
			isRefreshing.value = false;
			uni.stopPullDownRefresh()
		}, 800)
	}
	// 上拉加载
	const loadMore = () => {

		if (form.pageNo >= form.page) {
			return
		}
		form.pageNo++
		isLoadMore.value = true;
		getList()
		setTimeout(() => {
			isLoadMore.value = false;
		}, 2000)
	}
	const getList = async () => {
		uni.showLoading({
			title: '加载中...'
		});
		const data = await API.getpage({ pageNo: form.pageNo, pageSize: form.pageSize })
		form.page = data.total ? Math.floor(data.list.length / form.pageSize) : 1
		data.list.forEach(item => {
			dataList.value.push(item)
		})
		uni.hideLoading()
	}
	const photoUrl = ref()
	const getFace = async () => {
		const data = await API.facerenter()
		photoUrl.value = data.photoUrl
	}
	const addres = ref('')
	const getaddres = async () => {
		const data = await API.getroomIds()
		let roomNames = ''
		if(data&&data.length){
			data.forEach(item => {
				roomNames += item.roomName + ', ';
			})
			roomNames = roomNames.slice(0, -2);
			addres.value = roomNames
		}
	}
	onShow(() => {
		dataList.value = []
		getFace()
		getaddres()
		getList()
	})
</script>
<style lang="scss" scoped>
	.content{
		height: 100vh;
	}
	.access-list-content {
		padding-bottom: 116rpx;

		.access-l-nav {
			padding: 32rpx;
			display: flex;
			align-items: center;

			&>view {
				display: inline-block;
			}

			span {
				width: 8rpx;
				height: 28rpx;
				border-radius: 228rpx;
				display: inline-block;
				margin-right: 16rpx;
				background: rgba(253, 150, 24, 1);
			}

			&>view:nth-of-type(1) {
				width: 540rpx;
			}

			.access-l-t-c {
				color: rgba(253, 150, 24, 1);
			}
		}

		.access-l-info {
			background: #FFF;
			box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			margin: 0 32rpx;
			padding: 40rpx 32rpx 16rpx;
			display: flex;
			flex-direction: row;
			position: relative;

			.access-l-top {
				flex: 1;

				&>view {
					display: flex;
					flex-direction: row;
					padding-bottom: 14rpx;

					&>view:nth-of-type(1) {
						width: 140rpx;
						font-size: 28rpx;
						color: rgba(153, 153, 153, 1);
					}

					&>view:nth-of-type(2) {
						flex: 1;
						color: rgba(77, 77, 77, 1);
						font-size: 28rpx;
						max-height: 101rpx;
						overflow: hidden;
					}
				}
			}

			.access-l-btm {
				width: 160rpx;
				margin-left: 30rpx;

				image {
					width: 160rpx;
					height: 160rpx;
				}

				.access-l-set {
					text-align: center;

					image {
						width: 30rpx;
						height: 30rpx;
						padding: 10rpx
					}

					&>image:nth-of-type(2) {
						margin-left: 10rpx;
					}
				}
			}

			.access-status {
				position: absolute;
				top: 16rpx;
				right: 134rpx;
				width: 128rpx;
				height: 128rpx;
			}
		}

		.margin-l {
			margin-bottom: 24rpx;
		}
	}
</style>